@import "./var.scss";
@import "./mixins.scss";

// common class
.hover-bg{
	background-color: #fbfbfb !important;
}

// 1px 细线
$color-row-line: #ccc;
$color-col-line: #ccc;

.border-top-1px,
.border-right-1px,
.border-bottom-1px,
.border-left-1px {
	position: relative;

	&::before,
	&::after {
		content         : "";
		display         : block;
		position        : absolute;
		transform-origin: 0 0;
	}
}

.border-top-1px {
	&::before {
		border-top      : 1px solid $color-row-line;
		left            : 0;
		top             : 0;
		width           : 100%;
		transform-origin: 0 top;
	}
}

.border-right-1px {
	&::after {
		border-right    : 1px solid $color-col-line;
		top             : 0;
		right           : 0;
		height          : 100%;
		transform-origin: right 0;
	}
}

.border-bottom-1px {
	&::after {
		border-bottom   : 1px solid $color-row-line;
		left            : 0;
		bottom          : 0;
		width           : 100%;
		transform-origin: 0 bottom;
	}
}

.border-left-1px {
	&::before {
		border-left     : 1px solid $color-col-line;
		top             : 0;
		left            : 0;
		height          : 100%;
		transform-origin: left 0;
	}
}

@media (min-resolution: 2dppx) {
	.border-top-1px {
		&::before {
			width    : 200%;
			transform: scale(.5);
		}
	}

	.border-right-1px {
		&::after {
			height   : 200%;
			transform: scale(.5);
		}
	}

	.border-bottom-1px {
		&::after {
			width    : 200%;
			transform: scale(.5);
		}
	}

	.border-left-1px {
		&::before {
			height   : 200%;
			transform: scale(.5);
		}
	}
}

@media (min-resolution: 3dppx) {
	.border-top-1px {
		&::before {
			width    : 300%;
			transform: scale(.333);
		}
	}

	.border-right-1px {
		&::after {
			height   : 300%;
			transform: scale(.333);
		}
	}

	.border-bottom-1px {
		&::after {
			width    : 300%;
			transform: scale(.333);
		}
	}

	.border-left-1px {
		&::before {
			height   : 300%;
			transform: scale(.333);
		}
	}
}